/*
老板信息完善的路由容器组件
 */
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { Input, message, Layout } from "antd";
import { NavBar, Button } from "antd-mobile";
import HeaderSelector from "../../components/header-selector/header-selector";

import { updateUser } from "../../redux/actions";

const { TextArea } = Input;
const { Sider, Content } = Layout;

class LaobanInfo extends Component {
  state = {
    header: "",
    post: "",
    info: "",
    company: "",
    salary: "",
    save: "",
  };

  setHeader = (header) => {
    this.setState({
      header,
    });
  };

  handleChange = (name, value) => {
    this.setState({
      [name]: value,
    });
  };

  save = () => {
    const { post, header, company, salary, info } = this.state;
    if (!header) {
      message.error("头像不能为空");
      return;
    }
    if (!post) {
      message.error("招聘职位不能为空");
      return;
    }
    if (!company) {
      message.error("公司名称不能为空");
      return;
    }
    if (!salary) {
      message.error("职位薪资不能为空");
      return;
    }
    if (!info) {
      message.error("个人介绍不能为空");
      return;
    }
    this.props.updateUser(this.state);
    this.setState({ save: true });
  };

  render() {
    const { type } = this.props.user;
    const { post, company, salary, save,info} = this.state;
    if (save) {
      // 说明信息已经完善
      this.setState({ save: "" });
      const path = type === "dashen" ? "/dashen" : "/laoban";
      return <Redirect to={path} />;
    }

    return (
      <div>
        <NavBar className="main-header">老板信息完善</NavBar>
        <HeaderSelector setHeader={this.setHeader} />
        <Input
          size="large"
          placeholder="请输入招聘职位"
          value={post}
          onChange={(e) => {
            this.setState({ post: e.target.value });
          }}
          addonBefore="招聘职位:"
        />
        <Input
          size="large"
          placeholder="请输入公司名称"
          value={company}
          onChange={(e) => {
            this.setState({ company: e.target.value });
          }}
          addonBefore="公司名称:"
        />
        <Input
          size="large"
          placeholder="请输入职位薪资"
          value={salary}
          onChange={(e) => {
            this.setState({ salary: e.target.value });
          }}
          addonBefore="职位薪资:"
        />
        <Layout>
          <Sider width={83}>
            <div className="ant-input-group-addon" style={{width:83,height:100}}>职位要求:</div>
          </Sider>
          <Content>
            <TextArea
              size="large"
              placeholder="请输入个人介绍"
              value={info}
              style={{ borderRadius: 5 }}
              onChange={(e) => {
                this.setState({ info: e.target.value });
              }}
              autoSize={{ minRows: 4, maxRows: 4 }}
            />
          </Content>
        </Layout>
        <Button type="primary" onClick={this.save} className="main-header">
          保&nbsp;&nbsp;&nbsp;存
        </Button>
      </div>
    );
  }
}

export default connect((state) => ({ user: state.user }), { updateUser })(
  LaobanInfo
);
